<template>
    <div class="message-box-container rr-ignore">
        <div class="body-wrapper">
            <div class="content-wrapper">
                <div class="content">{{ content }}</div>
            </div>
            <div class="divider"></div>
            <div class="button-wrapper">
                <div class="button cancel" @click="handelCancel">
                    {{ cancelButtonText }}
                </div>
                <div class="divider-vertical"></div>
                <div class="button confirm" @click="handleConfirm">
                    {{ confirmButtonText }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MessageBox",
    components: {},
    props: {
        isVisible: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: "",
        },
        content: {
            type: String,
            default: "",
        },
        cancelButtonText: {
            type: String,
            default: "取消",
        },
        confirmButtonText: {
            type: String,
            default: "确定",
        },
        type: {
            type: String,
            default: "",
        },
        data: {
            type: Object,
            default: function () {
                return {};
            },
        },
        onCancel: {
            type: Function,
            default: function () {
                return;
            },
        },
        onConfirm: {
            type: Function,
            default: function () {
                return;
            },
        },
    },
    data() {
        return {};
    },
    mounted() {},
    beforeDestroy() {},
    methods: {
        handelCancel(event) {
            event.preventDefault();
            event.stopPropagation();
            this.onCancel(this.type);
        },
        handleConfirm(event) {
            event.preventDefault();
            event.stopPropagation();
            this.onConfirm(this.type, this.data);
        },
    },
};
</script>

<style scoped>
.message-box-container {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    z-index: 999999999;
    pointer-events: auto;
    position: absolute;
    top: 0px;
}
.body-wrapper {
    height: 180px;
    background: #fff;
    width: 260px;
    border-radius: 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    font-size: 14px;
    pointer-events: auto;
}
.content-wrapper {
    padding: 0px 20px 0px 20px;
    text-align: center;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
}
.button-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    height: calc(100% - 131px);
    align-items: center;
    text-align: center;
}
.button-wrapper .button {
    margin: 0px 20px;
    width: 70px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    cursor: pointer;
}
.button-wrapper .cancel {
    font-size: 14px;
    font-weight: 400;
    color: #cccccc;
    white-space: nowrap;
}
.button-wrapper .cancel :hover {
    border: 1px solid #409eff;
}

.button-wrapper .confirm {
    font-size: 14px;
    font-weight: 400;
    color: #de0112;
}
.divider {
    width: 100%;
    height: 1px;
    background: #eeeeee;
}
.divider-vertical {
    width: 1px;
    height: 100%;
    background: #eeeeee;
}
</style>
